<template name='qrcodeMask'>
	<view class="container">
		<view v-if="showMask">
			<!-- 弹出阴影 -->
			<view @click.stop="changeMask" @touchmove.stop="catchtouchmove" class="mask"></view>
			<!-- 二维码弹窗 -->
			<view class="qrcode-mask">
				<view class="col qrcode-mask-margin">
					<view class="col qrcode-mask-main">
						<text class="title">{{title}}</text>
						<image :src="qrcodeBaseUrl+content"></image>
					</view>
					<image @click.stop="changeMask" :src="url+'/static/imgs/close.png'" class="close"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var app = getApp();
	export default {
		name: 'qrcodeMask',
		data() {
			return {
				url: app.globalData.baseImgUrl,
				qrcodeBaseUrl: app.globalData.qrcodeBaseUrl,
				showMask: false
			}
		},
		props: {
			content: {
				type: String
			},
			title: {
				type: String,
				default: '二维码'
			}
		},
		methods: {
			changeMask() {
				this.showMask = !this.showMask;
			},
			catchtouchmove() {
				return false;
			}
		}
	}
</script>

<style scoped>
	.qrcode-mask {
		position: fixed;
		z-index: 999;
		width: 100%;
		top: 190rpx;
	}

	.qrcode-mask-margin {
		align-items: center;
	}

	.qrcode-mask-main {
		align-items: center;
		justify-content: center;
		width: 589rpx;
		height: 674rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 20rpx;
	}

	.qrcode-mask-main image {
		width: 460rpx;
		height: 460rpx;
		margin-top: 40rpx;
	}

	.close {
		width: 72rpx;
		height: 72rpx;
		margin-top: 62rpx;
	}
</style>
